<template>
  <el-container>
    <vHeadSpace />
    <el-container>
      <vAsideSpace />
      <el-container>
        <el-main class="main">
          <div class="content">
            <el-row :gutter="40" style="height: 40px;">
              <el-col :span="5" style="float: right;margin-top: 12px;">
                <el-button type="primary" size="small" @click="handleCreate()" style="float: right">添加数据库</el-button>
              </el-col>
            </el-row>
            <el-row align="center" style="margin-top: 10px">
              <el-table v-loading="isloading" :data="dataList" :row-style="{height: '52px'}" stripe style="width: 100%"
                :height="tableHeight" :cell-style="{padding: '0'}">
                <el-table-column type="index" align="center" label="序号" width="70" fixed :index="indexMethod" />
                <el-table-column prop="databasesname" label="数据库名称" align="center" fixed />
                <el-table-column prop="databasesip" label="IP地址" align="center" fixed />
                <el-table-column prop="databasestype" label="类型" align="center" fixed />
                <el-table-column prop="databasesstatus" label="状态" align="center" fixed>
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.databasesstatus === '1' ? 'success' : 'danger' ">
                      {{scope.row.databasesstatus === '1' ?'可\u2003用':'不可用'}}</el-tag>
                  </template>
                </el-table-column>


                <el-table-column label="操作" align="center" min-width="100">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit"
                      @click="prepareEdit(scope.row.databasesid)">修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                      @click="promptDelete(scope.row.databasesid)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination :current-page="currentPage" :page-sizes="[7,10,15,20]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" style="text-align: center">
              </el-pagination>
            </el-row>
            <div class="add-form">
              <el-dialog title="新增数据库" :visible.sync="dialogFormVisible" v-if="dialogFormVisible" width="1000px">
                <el-form :model="formData" :rules="rules" label-width="100px" ref="formDataRef">
                  <!--                                    <el-row >-->
                  <!--                                        <el-col :span="8">-->
                  <!--                                            <el-form-item label="用户名" prop="username">-->
                  <!--                                                <el-input v-model="formData.username" placeholder="数据库的用户"/>-->
                  <!--                                            </el-form-item>-->
                  <!--                                        </el-col>-->
                  <!--                                        <el-col :span="8">-->
                  <!--                                            <el-form-item label="密码" prop="password">-->
                  <!--                                                <el-input v-model="formData.password" placeholder="数据库的操作密码"/>-->
                  <!--                                            </el-form-item>-->
                  <!--                                        </el-col>-->
                  <!--                                    </el-row>-->

                  <el-row :gutter="4">
                    <el-col :span="8">
                      <el-form-item label="数据库名称" prop="databasesname">
                        <el-input v-model="formData.databasesname" placeholder="全局唯一，不可重复" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="所属主机" prop="hostid">
                        <el-select v-model="formData.hostid" clearable placeholder="所属主机"
                          @change="selectchange($event)">
                          <el-option v-for="item in online_host_list" :key="item.hostid" :label="item.host"
                            :value="item.hostid">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <!--                                    <el-row :gutter="2">-->
                  <!--                                        <el-col :span="8">-->
                  <!--                                            <el-form-item label="ip地址" prop="databasesip">-->
                  <!--                                                <el-input v-model="formData.databasesip"/>-->
                  <!--                                            </el-form-item>-->
                  <!--                                        </el-col>-->

                  <!--                                        <el-col :span="8">-->
                  <!--                                            <el-form-item label="端口" prop="databasesport" >-->
                  <!--                                                <el-input v-model="formData.databasesport"/>-->
                  <!--                                            </el-form-item>-->
                  <!--                                        </el-col>-->
                  <!--                                    </el-row>-->

                  <el-row :gutter="4">
                    <el-col :span="8">
                      <el-form-item label="数据库类型" prop="databasestype">
                        <!--多选加上multitude-->
                        <el-select v-model="formData.databasestype" placeholder="请选择">
                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="描述信息" prop="databasesdescription">
                        <el-input v-model="formData.databasesdescription" type="textarea" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false,isSearching=false">取消</el-button>
                  <el-button type="primary" @click="handleAdd" :disabled="isSearching">确定</el-button>
                </div>
              </el-dialog>
            </div>
            <div class="modify-form">
              <el-dialog title="修改数据库" :visible.sync="modifyFormVisible" v-if="modifyFormVisible" width="1000px">
                <el-form :model="formData" :rules="rules" label-width="100px">
                  <el-row :gutter="4">
                    <el-col :span="8">
                      <el-form-item label="数据库名称" prop="databasesname">
                        <el-input v-model="formData.databasesname" placeholder="全局唯一，不可重复" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="所属主机" prop="hostid">
                        <el-select v-model="formData.hostid" clearable placeholder="所属主机"
                          @change="selectchange($event)">
                          <el-option v-for="item in online_host_list" :key="item.hostid" :label="item.host"
                            :value="item.hostid">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="2">
                    <el-col :span="8">
                      <el-form-item label="ip地址" prop="databasesip">
                        <el-input v-model="formData.databasesip" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="端口" prop="databasesport">
                        <el-input v-model="formData.databasesport" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="4">
                    <el-col :span="8">
                      <el-form-item label="数据库类型" prop="databasestype">
                        <el-select v-model="formData.databasestype" placeholder="请选择">
                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>


                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="描述信息" prop="databasesdescription">
                        <el-input v-model="formData.databasesdescription" type="textarea" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

                <div slot="footer" class="dialog-footer">
                  <el-button @click="modifyFormVisible = false,isSearching=false">取消</el-button>
                  <el-button type="primary" @click="handleModify" :disabled="isSearching">确定</el-button>
                </div>
              </el-dialog>
            </div>

          </div>
        </el-main>
        <vFootSpace />
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios'
export default {
  name: 'DatabaseManagement',
  data() {
    return {
      hostIds: '',
      online_host_list: [],
      typevalue: "",
      tableHeight: 0.748 * document.body.clientHeight,
      currentPage: 1,
      pageSize: 7,
      total: 1,
      isloading: true,
      isSearching: false,
      formData: {}, // 添加表单
      rules: { // 校验规则
        databasesname: [{ required: true, message: '类型为必填项', trigger: 'blur' }, {
          pattern: /^[a-zA-Z_\u4e00-\u9fa5]{1}[a-zA-Z0-9_\u4e00-\u9fa5]{5,19}$/,
          message: '非数字开头6-20位中英文、数字、"_"', trigger: 'blur'
        }],
        username: [{ required: true, message: '用户名为必填项', trigger: 'blur' },
        {
          pattern: /^.{1,20}$/,
          message: '长度为1-20位', trigger: 'blur'
        }],
        password: [{ required: true, message: '密码为必填项', trigger: 'blur' },
        { pattern: /^.{1,30}$/, message: '长度为1-30位' }],
        databasesip: [{ required: true, message: 'IP地址为必填项', trigger: 'blur' },
        {
          pattern: /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/,
          message: '非法IP地址', trigger: 'blur'
        }],
        databasesport: [{ required: true, message: '端口为必填项', trigger: 'blur' },
        { pattern: /^([1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-4])$/, message: '非法的端口号', trigger: 'blur' }],
        databasesdescription: [{ required: false, trigger: 'blur', type: 'string' },
        { pattern: /^.{0,2048}$/m, message: '长度为0-2048位' }],
      },
      dialogFormVisible: false, // 增加表单是否可见
      modifyFormVisible: false, //修改数据库表单可见性
      options: [{
        value: '1',
        label: 'mysql'
      }, {
        value: '2',
        label: 'oracle'
      }, {
        value: '3',
        label: 'sql server'
      }, {
        value: '4',
        label: '达梦'
      }],
      dataList: [],
    }
  },
  // 钩子函数，VUE对象初始化完成后自动执行
  mounted() {
    this.getALlDatabases()
    this.getHostList()
  },
  //
  methods: {
    TestMessage() {
      this.$message({
        message: '测试成功',
        type: 'success'
      })
    },
    handleAdd() {
      this.$refs['formDataRef'].validate((valid) => {
        if (valid) {
          this.$axios.post('/business/add_a_databases.action', this.formData).then((res) => {
            if (res.data.content.result === 0) {
              this.$message({
                message: '该主机下已存在相同数据库',
                type: 'error'
              })
            } else {
              this.dialogFormVisible = false;
              this.getALlDatabases();
              this.isSearching = false;
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            }
          })
        }
      })
    },
    handleModify() {
      // console.log(this.formData)
      this.modifyDatabases()
      this.modifyFormVisible = false;
      this.$message({
        message: '修改成功',
        type: 'success'
      })
    },
    prepareEdit(index) {
      this.resetValidate()
      this.resetForm()
      this.$axios({
        method: 'post',
        url: '/business/get_a_databases.action',
        params: {
          databasesid: index
        }
      }).then((res) => {
        this.formData.databasesid = res.data.content.result.databasesid
        this.formData.databasesname = res.data.content.result.databasesname
        this.formData.hostid = res.data.content.result.hostid
        this.formData.databasesip = res.data.content.result.databasesip
        this.formData.databasesport = res.data.content.result.databasesport
        this.formData.databasestype = res.data.content.result.databasestype
        this.formData.databasesdescription = res.data.content.result.databasesdescription
      }).catch((error) => {
        console.log(error)
      })
      this.modifyFormVisible = true
    },
    promptDelete(index) {
      this.$confirm('是否确认删除该数据库', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'post',
          url: '/business/delete_a_databases.action',
          params: {
            databasesid: index
          }
        }).then((res) => {
          // if (res.data === '') {
          //   this.getALlDatabases()
          // } else {
          //   this.dataList = res.data.content.result
          // }
          // if ((this.total - 1) % this.pageSize === 0) {
          //   this.currentPage = this.currentPage - 1
          // }
          // this.handleCurrentChange(this.currentPage)
          this.getALlDatabases()
          // this.isloading = false
          this.$message({
            message: '数据库删除成功！',
            type: 'success'
          })
        }).catch(() => {
          this.$message({
            message: '数据库删除失败',
            type: 'error'
          })
        })
      })

    },
    handleCreate() {
      this.resetValidate()
      this.resetForm()
      this.dialogFormVisible = true
    },

    resetValidate() {

    },
    resetForm() {
      this.formData = {
        databasesid: '',
        databasesname: '',
        databasesip: '',
        databasestype: '',
        databasesstatus: '',
        hostid: '',
        username: '',
        password: '',
        databasesport: '',
        databasesdescription: ' '
      }// 重置数据
    },
    indexMethod(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.isloading = true
      setTimeout(() => { }, 2000)
      this.getALlDatabases()
    },
    //分页页面数量改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getALlDatabases()
    },
    getALlDatabases() {
      this.isloading = true
      this.getALlDatabasesCounts()
      this.$axios({
        method: "post",
        url: "/business/get_all_databases_real.action",
        params: {
          pageSize: this.pageSize,
          currentPage: this.currentPage
        }
      }).then((res) => {
        this.dataList = res.data.content.result
        this.isloading = false
      }).catch((error) => {
        console.log(error)
      })
    },
    getALlDatabasesCounts() {
      this.$axios({
        method: "post",
        url: "/business/get_all_databases_counts.action",
      }).then((res) => {
        this.total = res.data.content.result
      }).catch((error) => {
        console.log(error)
      })
    },

    getHostList() {
      let _this = this;
      this.$axios({
        method: 'get',
        url: '/monitor/get_avail_all_online_host.action'
      }).then(function (response) {
        let resultList = response.data.content.result
        _this.online_host_list = resultList;
      }).catch(function (error) {
        console.log(error)
      })
    },
    selectchange(val) {
      console.log(val)
    },
    addDatabases() {
      // console.log(this.formData)

      this.$axios.post('/business/add_a_databases.action', this.formData).then((res) => {
        if (res.data.content.result === 0) {
          this.$message({
            message: '该主机下已存在相同数据库',
            type: 'error'
          })
        } else {
          this.dialogFormVisible = false;
          this.getALlDatabases();
          this.isSearching = false;
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        }
      })

    },
    modifyDatabases() {
      this.$axios.post('/business/modify_a_databases.action', this.formData).then((res) => {
        this.modifyFormVisible = false;
        this.isSearching = false;
        this.getALlDatabases();
      })

    },
  }
}
</script>
<style scoped>
.main {
  height: 89vh;
  width: 100%;
  margin-top: 60px;
  padding: 10px;
  overflow-y: hidden;
}


.content {
  margin-top: 0;
  width: 100%;
  overflow-x: hidden
}

.itemInfo-middle-type div {
  display: inline;
  padding-left: 5px;
  padding-right: 5px;
  height: 30px;
  line-height: 50px;
  color: #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
</style>
